<template>
	<div class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50">
		<!-- 背景装饰 -->
		<div class="fixed inset-0 overflow-hidden pointer-events-none">
			<div
				class="absolute -top-40 -right-40 w-80 h-80 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob">
			</div>
			<div
				class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000">
			</div>
			<div
				class="absolute top-40 left-40 w-80 h-80 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-4000">
			</div>
		</div>

		<!-- 主要内容区域 -->
		<div class="container mx-auto px-8 py-10 pt-32 relative z-10">
			<!-- 页面标题 -->
			<div class="text-center mb-16">
				<h1 class="text-5xl font-bold mb-6 text-gray-900">学习指南</h1>
				<p class="text-xl text-gray-600 max-w-3xl mx-auto">
					欢迎来到EduLiveLink学习平台！本指南将帮助您快速上手，充分利用我们的教育资源和服务。
				</p>
			</div>

			<!-- 学习指南内容 -->
			<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
				<!-- 快速开始 -->
				<div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8">
					<div class="flex items-center gap-4 mb-6">
						<div
							class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center">
							<el-icon class="text-white text-2xl">
								<VideoPlay />
							</el-icon>
						</div>
						<div>
							<h3 class="text-2xl font-bold text-gray-900">快速开始</h3>
							<p class="text-gray-600">5分钟了解平台基本功能</p>
						</div>
					</div>
					<div class="space-y-4">
						<div class="flex items-center gap-3">
							<div
								class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold">
								1</div>
							<span class="text-gray-700">注册账号并完善个人信息</span>
						</div>
						<div class="flex items-center gap-3">
							<div
								class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold">
								2</div>
							<span class="text-gray-700">浏览课程目录，选择感兴趣的课程</span>
						</div>
						<div class="flex items-center gap-3">
							<div
								class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold">
								3</div>
							<span class="text-gray-700">创建班级，开始教学之旅</span>
						</div>
					</div>
				</div>

				<!-- 功能特色 -->
				<div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8">
					<div class="flex items-center gap-4 mb-6">
						<div
							class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center">
							<el-icon class="text-white text-2xl">
								<Star />
							</el-icon>
						</div>
						<div>
							<h3 class="text-2xl font-bold text-gray-900">功能特色</h3>
							<p class="text-gray-600">探索平台的独特优势</p>
						</div>
					</div>
					<div class="space-y-3">
						<div class="flex items-center gap-3">
							<el-icon class="text-green-500">
								<Check />
							</el-icon>
							<span class="text-gray-700">实时直播互动教学</span>
						</div>
						<div class="flex items-center gap-3">
							<el-icon class="text-green-500">
								<Check />
							</el-icon>
							<span class="text-gray-700">个性化学习路径</span>
						</div>
						<div class="flex items-center gap-3">
							<el-icon class="text-green-500">
								<Check />
							</el-icon>
							<span class="text-gray-700">丰富的学习资源</span>
						</div>
						<div class="flex items-center gap-3">
							<el-icon class="text-green-500">
								<Check />
							</el-icon>
							<span class="text-gray-700">智能学习分析</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 详细指南 -->
			<div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 mb-16">
				<h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">详细使用指南</h3>

				<div class="space-y-8">
					<!-- 课程管理 -->
					<div class="border-l-4 border-blue-500 pl-6">
						<h4 class="text-xl font-semibold text-gray-900 mb-4">课程管理</h4>
						<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
							<div class="space-y-3">
								<h5 class="font-medium text-gray-800">课程准备</h5>
								<ul class="space-y-2 text-gray-600 text-sm">
									<li>• 创建课程大纲和教学计划</li>
									<li>• 上传课程资料和课件</li>
									<li>• 设置作业和考核标准</li>
								</ul>
							</div>
							<div class="space-y-3">
								<h5 class="font-medium text-gray-800">教学建议</h5>
								<ul class="space-y-2 text-gray-600 text-sm">
									<li>• 提前发布课程通知</li>
									<li>• 及时批改作业并反馈</li>
									<li>• 定期组织班级答疑</li>
								</ul>
							</div>
						</div>
					</div>

					<!-- 班级管理 -->
					<div class="border-l-4 border-green-500 pl-6">
						<h4 class="text-xl font-semibold text-gray-900 mb-4">班级管理</h4>
						<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
							<div class="space-y-3">
								<h5 class="font-medium text-gray-800">班级创建</h5>
								<ul class="space-y-2 text-gray-600 text-sm">
									<li>• 设置班级名称和年级</li>
									<li>• 生成班级邀请码</li>
									<li>• 审核学生加入申请</li>
								</ul>
							</div>
							<div class="space-y-3">
								<h5 class="font-medium text-gray-800">班级管理</h5>
								<ul class="space-y-2 text-gray-600 text-sm">
									<li>• 管理班级成员</li>
									<li>• 发布班级通知</li>
									<li>• 组织班级活动</li>
								</ul>
							</div>
						</div>
					</div>

					<!-- 资源管理 -->
					<div class="border-l-4 border-purple-500 pl-6">
						<h4 class="text-xl font-semibold text-gray-900 mb-4">资源管理</h4>
						<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
							<div class="space-y-3">
								<h5 class="font-medium text-gray-800">教学资源</h5>
								<ul class="space-y-2 text-gray-600 text-sm">
									<li>• 上传课程视频和文档</li>
									<li>• 发布练习题和测试</li>
									<li>• 分享教学资料</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 常见问题链接 -->
			<div class="text-center">
				<p class="text-gray-600 mb-4">还有疑问？查看我们的常见问题</p>
				<router-link to="/faq"
					class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition-colors">
					<el-icon>
						<QuestionFilled />
					</el-icon>
					查看常见问题
				</router-link>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		VideoPlay,
		Star,
		Check,
		QuestionFilled
	} from '@element-plus/icons-vue'
</script>

<style scoped>
	@keyframes blob {
		0% {
			transform: translate(0px, 0px) scale(1);
		}

		33% {
			transform: translate(30px, -50px) scale(1.1);
		}

		66% {
			transform: translate(-20px, 20px) scale(0.9);
		}

		100% {
			transform: translate(0px, 0px) scale(1);
		}
	}

	.animate-blob {
		animation: blob 7s infinite;
	}

	.animation-delay-2000 {
		animation-delay: 2s;
	}

	.animation-delay-4000 {
		animation-delay: 4s;
	}
</style>